Data Labels

Data labels are labels associated with data points on the chart. They can be useful on some charts by making it easier to see which series a particular point belongs to, or its exact value.

C1Chart supports data labels. Each data series has a PointLabelTemplate property that specifies the visual element that should be displayed next to each point. The PointLabelTemplate is usually defined as a XAML resource, and may be assigned to the chart from XAML or from code.

You can add a DataTemplate to determine both visual aspects of how the data is presented and how data binding accesses the presented data.

To define the PointLabelTemplate as a XAML resource you can create a Resource Dictionary, add the DataTemplate resource to your Resource Dictionary and then in your Window.xaml file you can access the DataTemplate resource.

To add a new resource dictionary:

In Solution Explorer, right-click your project, point to Add, and then select Resource Dictionary. The Add New Item dialog box appears.
In the Name text box, name the dictionary Resources.xaml and click the Add button.
Resources.xaml is added to the project and opens in the code editor.

To create a label you need to create the label template and assign the PointLabelTemplate to the template.

When rendering the plot for each data point the label is created based on the specified template. The DataContext property of the label is set to the current DataPoint instance that provides information about the point. When using data binding it makes it easier to display this information in the label.

Here is the sample of a label template that displays the value of the point.

XAML	Copy Code
<DataTemplate x:Key="lbl"> <TextBlock Text="{Binding Path=Value}" /> </DataTemplate>

After you define a resource, you can reference the resource to be used for a property value by using a resource markup extension syntax that specifies the key name

To assign the template to the data series set the PointLabelTemplate property to the following:

XAML	Copy Code
<c1chart:DataSeries PointLabelTemplate="{StaticResource lbl}" />

Since it is a standard data template, the complex label can be built, for example, the next sample template defines the data label for the XY chart which shows both coordinates of the data point.

It uses the standard grid with two columns and two rows as a container. The x-value of the point is obtained with indexer of the DataPoint class. The indexer allows getting the values for the data series classes which support several data sets, such as XYDataSeries class.

XAML	Copy Code
<DataTemplate x:Key="lbl"> <!-- Grid 2x2 with black border --> <Border BorderBrush="Black"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!-- x-coordinate --> <TextBlock Text="X=" /> <TextBlock Grid.Column="1" Text="{Binding Path=[XValues]}" /> <!-- y-coordinate --> <TextBlock Grid.Row="1" Text="Y=" /> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" /> </Grid> </Border> </DataTemplate>

XAML

Copy Code

<DataTemplate x:Key="lbl">
   <!-- Grid 2x2 with black border  -->
   <Border BorderBrush="Black">
          <Grid>
                 <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                 </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                 </Grid.RowDefinitions>
                 <!-- x-coordinate -->
                 <TextBlock Text="X=" />
                 <TextBlock Grid.Column="1" Text="{Binding Path=[XValues]}" />
                 <!-- y-coordinate -->
                 <TextBlock Grid.Row="1" Text="Y=" />
                 <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" />
          </Grid>
   </Border>
</DataTemplate>

When displaying the numerical data value often it is necessary to format the output value. With the static class Format you can specify standard .Net format string inside the XAML code. For example, the sample code uses converter to format percentage value.

XAML	Copy Code
<DataTemplate x:Key="lbl1"> <TextBlock Text="{Binding Path=PercentageSeries, Converter={x:Static c1chart:Converters.Format}, ConverterParameter=#.#%}"/> </DataTemplate>